<template>
	<div class="supportList">
		<el-card shadow="hover">
			<div class="support-list mb15">
				<el-form :inline="true" :model="searchForm" label-width="80px" class="demo-form-inline">
					<el-row>
						<el-col :span="10">
							<el-form-item label="状态">
								<el-radio-group v-model="searchForm.status">
									<el-radio-button :label="-1">全部</el-radio-button>
									<el-radio-button :label="1">已启用</el-radio-button>
									<el-radio-button :label="0">已禁用</el-radio-button>
								</el-radio-group>
								<el-button type="primary" @click="init" style="margin-left: 10px">搜索</el-button>
							</el-form-item>
							<el-form-item> </el-form-item>
						</el-col>
						<el-col :span="14" style="text-align: right">
							<el-button type="success" @click="toAdd">新增参数</el-button>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column type="index" width="50"> </el-table-column>
				<el-table-column prop="name" label="名称"> </el-table-column>
				<el-table-column prop="description" label="说明"> </el-table-column>
				<el-table-column label="启用状态">
					<template #default="scope">
						<MySwitch v-model="scope.row.status" @change="changeStatus(scope.row)" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button text type="primary" @click="toEdit(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
		<AddDialog v-model="addDialogVisible" :isAdd="isAdd" :itemInfo="itemInfo" @refresh="init" />
	</div>
</template>
<script setup name="ProductSupport">
import { ElMessage } from 'element-plus';
import AddDialog from './AddDialog.vue';
import { deepCopy } from '/@/utils';
import { useProductApi } from '/@/api/product';

const { editSupport, getSupportList } = useProductApi();

const isAdd = ref(false);
const itemInfo = ref({});
const searchForm = ref({
	status: -1,
});
const tableData = ref([]);
const page = ref({
	pageSize: 10,
	current: 1,
	total: 0,
});

const init = async () => {
	let res = await getSupportList({ status: searchForm.value.status, ...page.value });
	if (res.code !== 200) return;
	const { data, total } = res.data;
	tableData.value = data;
	page.value.total = total;
};
onMounted(init);
const addDialogVisible = ref(false);
const toAdd = () => {
	addDialogVisible.value = true;
	isAdd.value = true;
};
const toEdit = (row) => {
	itemInfo.value = deepCopy(row);
	addDialogVisible.value = true;
	isAdd.value = false;
};

const changeStatus = async ({ id, status }) => {
	let res = await editSupport({ id, status });
	if (res.code === 200) {
		ElMessage.success('更改状态成功！');
	} else {
		init();
	}
};

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};
</script>
<style lang="scss" scoped></style>
